<template>

  <div class="col main-content-edit mt-15">
    <el-card>
      <div slot="header" class="clearfix">
        <h5>添加商品</h5>
      </div>

      <el-form :model="good" :rules="rules" labelPosition="top" ref="form" class="custom-form">
        <el-form-item label="商品名称：" prop="name">
          <el-row :gutter="20">
            <el-col :span="10">
              <el-input v-model="good.name" placeholder="输入商品名称"></el-input>
            </el-col>
            <el-col :span="14">
              <span>请填写常用的商品的名称</span>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="商品分类:" prop="idpath">
          <el-row :gutter="20">
            <el-col :span="10">
              <h-good-category-choose v-model="good.idpath"/>
            </el-col>
            <el-col :span="14">
              <span>请选择商品的所属分类</span>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="商品品牌:" prop="brandId">
          <el-row :gutter="20">
            <el-col :span="10">
              <h-brand-choose v-model="good.brandId"></h-brand-choose>
            </el-col>
            <el-col :span="14">
              <span>请选择商品的品牌</span>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="商品规格:">
          <el-row :gutter="20">
            <el-col :span="10">
              <h-spec-choose v-model="good.specIds"></h-spec-choose>
            </el-col>
            <el-col :span="14">
              <span>请选择商品的规格</span>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="商品图片:">
          <el-row :gutter="20">
            <el-col :span="24">
              <h-pic-upload-and-choose :files="good.imgs" owner="admin"></h-pic-upload-and-choose>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="商品描述:">
          <el-row :gutter="20">
            <el-col :span="10">
              <el-input type="textarea" v-model="good.description" :rows="4"/>
            </el-col>
            <el-col :span="14">
              <span>请描述商品</span>
            </el-col>
          </el-row>
        </el-form-item>


      </el-form>
      <div>
        <el-button type="primary" @click="addGood" v-loading="loading"><i class="fa fa-plus"></i> 添加</el-button>
        <el-button type="success" @click="goback"><i class="fa fa-sign-out"></i> 返回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
  import AdminService from 'src/service/admin'
  import HBrandChoose from 'src/components/common/choose/HBrandChoose'
  import HGoodCategoryChoose from 'src/components/common/choose/HGoodCategoryChoose'
  import HPicUploadAndChoose from 'src/components/common/HPicUploadAndChoose'
  import HSpecChoose from 'src/components/common/choose/HSpecChoose'

  export default {
    name: 'AdminCreateGood',
    components: {
      HSpecChoose,
      HBrandChoose, HGoodCategoryChoose, HPicUploadAndChoose, HSpecChoose
    },
    data() {
      return {
        loading: false,
        good: {
          name: null,
          categoryId: null,
          specIds: null,
          idpath: [],
          brandId: null,
          categoryIdPath: '',
          imgs: [],
          description: null
        },
        rules: {
          name: [
            {required: true, message: '请输入商品名称', trigger: 'blur'}],
          idpath: [
            {required: true, message: '请选择商品分类', trigger: 'change'}
          ],
          brandId: [
            {required: true, message: '请选择商品品牌', trigger: 'change'}
          ]
        }
      }
    },

    methods: {
      addGood: function () {
        this.loading = true
        const me = this
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (me.good.idpath.length > 0) {
              me.good.categoryId = me.good.idpath[me.good.idpath.length - 1]
              me.good.categoryIdPath = me.good.idpath.join(',')
            }
            if (me.good.imgs.length == 0) {
              me.good.imgs = null
            }
            AdminService.saveGood(me.good).then(function (result) {
              if (result != null) {
                me.$message.success('添加商品成功!')
                setTimeout(function () {
                  me.$router.go(-1)
                }, 600)
              } else {
                me.$message.warning('添加商品错误!')
              }
              me.loading = false
            })
          } else {
            me.$message.error('请按要求填写信息!')
            me.loading = false
          }
        })
      },
      goback: function () {
        this.$router.go(-1)
      }
    }
  }
</script>
